<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./images/logo.ico" />
    <script src="./js/sethtmlfontSize.js"></script>
    <link rel="stylesheet" href="./css/chooseCity.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>选择城市</title>
</head>
<body>
    <!--头部-->
    <header class="headerCity">
        <i></i>
        <span>选择城市</span>
    </header>
    <!--定位城市，城市列表-->
    <div class="bodyCity">
        
        <!--搜索-->
<!--
        <div class="b-searchCity">
            <span>搜索</span>
            <input type="text" autofocus="autofocus">
        </div>
-->
        
        <!--城市定位-->
        <div class="b-positionCity">
            <span>定位城市：</span>
            <strong id="fixedCity" class="fixedCity">深圳</strong>
        </div>
        
        <!--热门城市-->    
        <h3>热门城市</h3>
        <div class="b-hotCity">
            <ul class="hotCity-ul">
                <li class="h-city" data-area="北京市"><a href="javascript:void(0)">北京市</a></li>
                <li class="h-city" data-area="上海市"><a href="javascript:void(0)">上海市</a></li>
                <li class="h-city" data-area="广州市"><a href="javascript:void(0)">广州市</a></li>
                <li class="h-city" data-area="深圳市"><a href="javascript:void(0)">深圳市</a></li>
                <li class="h-city" data-area="重庆市"><a href="javascript:void(0)">重庆市</a></li>
                <li class="h-city" data-area="武汉市"><a href="javascript:void(0)">武汉市</a></li>
                <li class="h-city" data-area="西安市"><a href="javascript:void(0)">西安市</a></li>
                <li class="h-city" data-area="郑州市"><a href="javascript:void(0)">郑州市</a></li>
                <li class="h-city" data-area="南京市"><a href="javascript:void(0)">南京市</a></li>
                <li class="h-city" data-area="成都市"><a href="javascript:void(0)">成都市</a></li>
                <li class="h-city" data-area="杭州市"><a href="javascript:void(0)">杭州市</a></li>
                <div class="clears"></div>
            </ul>
        </div>
        
        <!--全部城市-->
        <h3>全部城市</h3>
        <div class="b-allCity">
            <ul class="allCitys" style="display:none">
                
            </ul>
            <!--城市列表-->
            <ul class="all_ul">
                <p>正在加载中.........</p>
               
            </ul>            
                        
        </div>
    </div>     
    <!--回到顶部-->
    <div id="back-top" class="back-top">
        <img src="./images/back_top_icon.png" alt="回到顶部">      
    </div>
</body>
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/chooseCity.js"></script>
<script>
    //滚动页面，当页面的scrollTop大于一定的值时显示回到顶部
    $(window).scroll(function(){
        var height=$(window).height()*2;
        if($(window).scrollTop()>height){
            $("#back-top").show();
        }else{
            $("#back-top").hide();
        }
    });
    //点击回到顶部
    $("#back-top").on("click",function(){
        $(this).hide();
        $(window).scrollTop(0);
    });
</script>
</html>